<template>
  <view class="container">
    <!-- 考试状态 -->
    <view class="exam-header" v-if="!isSubmitted">
      <view class="exam-progress">
        <text class="progress-text">第 {{ currentQuestionIndex + 1 }} 题 / 共 {{ questions.length }} 题</text>
        <view class="progress-bar">
          <view class="progress-fill" :style="{ width: ( (currentQuestionIndex + 1) / questions.length) * 100 + '%' }"></view>
        </view>
      </view>
    </view>

    <!-- 题目展示区 -->
    <view class="question-container" v-if="!isSubmitted">
      <view class="question-header">
        <text class="question-number">{{ currentQuestionIndex + 1 }}.</text>
        <text class="question-text">{{ currentQuestion.content }}</text>
      </view>

      <view class="options-container">
        <view 
          v-for="(option, index) in currentQuestion.options" 
          :key="index" 
          class="option-item"
          :class="{ 'selected': isOptionSelected(index) }"
          @click="selectOption(index)"
        >
          <text class="option-label">{{ getOptionLabel(index) }}.</text>
          <text class="option-text">{{ option.text }}</text>
        </view>
      </view>
    </view>

    <!-- 提交后结果展示区 -->
    <view class="result-container" v-if="isSubmitted">
      <text class="result-title">考试结束</text>
      <text class="result-score">您的得分：{{ score }} / {{ questions.length }}</text>
      <text class="result-desc">正确率：{{ Math.round((score / questions.length) * 100) }}%</text>

      <view class="answer-detail">
        <text class="detail-title">答题详情：</text>
        <view 
          v-for="(q, index) in questions" 
          :key="index" 
          class="answer-item"
          :class="{ 'correct': userAnswers[index] === q.correctAnswer, 'incorrect': userAnswers[index] !== q.correctAnswer }"
        >
          <text class="detail-question">第 {{ index + 1 }} 题: {{ q.content }}</text>
          <text class="detail-user-answer">您的答案: {{ getOptionLabel(userAnswers[index]) }}</text>
          <text class="detail-correct-answer">正确答案: {{ getOptionLabel(q.correctAnswer) }}</text>
        </view>
      </view>
    </view>

    <!-- 操作按钮区 -->
    <view class="button-container" v-if="!isSubmitted">
      <button class="nav-btn" @click="prevQuestion" :disabled="currentQuestionIndex === 0">上一题</button>
      <button class="submit-btn" @click="submitExam">交卷</button>
      <button class="nav-btn" @click="nextQuestion" :disabled="currentQuestionIndex === questions.length - 1">下一题</button>
    </view>

    <view class="button-container" v-if="isSubmitted">
      <button class="restart-btn" @click="restartExam">重新考试</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 模拟试题数据（可从后端API获取）
      questions: [
        {
          id: 1,
          content: "根据《中华人民共和国宪法》，中华人民共和国的一切权力属于谁？",
          options: [
            { text: "中国共产党" },
            { text: "人民" },
            { text: "国务院" },
            { text: "全国人民代表大会" }
          ],
          correctAnswer: 1 // 索引，对应 "人民"
        },
        {
          id: 2,
          content: "根据《中华人民共和国民法典》，八周岁以上的未成年人为限制民事行为能力人。",
          options: [
            { text: "对" },
            { text: "错" }
          ],
          correctAnswer: 0
        },
        {
          id: 3,
          content: "根据《中华人民共和国刑法》，故意犯罪，应当负刑事责任。",
          options: [
            { text: "对" },
            { text: "错" }
          ],
          correctAnswer: 0
        },
        {
          id: 4,
          content: "根据《中华人民共和国行政处罚法》，行政处罚决定书应当载明当事人的姓名或者名称、地址。",
          options: [
            { text: "对" },
            { text: "错" }
          ],
          correctAnswer: 0
        },
        {
          id: 5,
          content: "根据《中华人民共和国行政许可法》，行政许可所依据的法律、法规、规章修改或者废止，或者准予行政许可所依据的客观情况发生重大变化的，为了公共利益的需要，行政机关可以依法变更或者撤回已经生效的行政许可。",
          options: [
            { text: "对" },
            { text: "错" }
          ],
          correctAnswer: 0
        }
      ],
      currentQuestionIndex: 0,
      userAnswers: [], // 存储用户答案索引
      isSubmitted: false,
      score: 0
    };
  },
  computed: {
    currentQuestion() {
      return this.questions[this.currentQuestionIndex];
    }
  },
  methods: {
    selectOption(optionIndex) {
      // 单选题，直接覆盖答案
      this.$set(this.userAnswers, this.currentQuestionIndex, optionIndex);
    },
    isOptionSelected(index) {
      return this.userAnswers[this.currentQuestionIndex] === index;
    },
    getOptionLabel(index) {
      return String.fromCharCode(65 + index); // 0 -> A, 1 -> B, ...
    },
    prevQuestion() {
      if (this.currentQuestionIndex > 0) {
        this.currentQuestionIndex--;
      }
    },
    nextQuestion() {
      if (this.currentQuestionIndex < this.questions.length - 1) {
        this.currentQuestionIndex++;
      }
    },
    submitExam() {
      // 计算得分
      let score = 0;
      this.questions.forEach((q, index) => {
        if (this.userAnswers[index] === q.correctAnswer) {
          score++;
        }
      });
      this.score = score;
      this.isSubmitted = true;
    },
    restartExam() {
      this.currentQuestionIndex = 0;
      this.userAnswers = [];
      this.isSubmitted = false;
      this.score = 0;
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.exam-header {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.exam-progress {
  display: flex;
  flex-direction: column;
}

.progress-text {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.progress-bar {
  height: 10rpx;
  background-color: #e0e0e0;
  border-radius: 5rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #007aff;
  transition: width 0.3s ease;
}

.question-container {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.question-header {
  margin-bottom: 30rpx;
}

.question-number {
  font-size: 32rpx;
  font-weight: bold;
  color: #007aff;
  margin-right: 10rpx;
}

.question-text {
  font-size: 30rpx;
  color: #333;
  line-height: 1.6;
}

.options-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border: 2rpx solid #ddd;
  border-radius: 15rpx;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.option-item.selected {
  background-color: #e3f2fd;
  border-color: #007aff;
}

.option-label {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-right: 15rpx;
  min-width: 40rpx;
}

.option-text {
  font-size: 28rpx;
  color: #555;
  flex: 1;
}

.result-container {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.result-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.result-score {
  font-size: 48rpx;
  font-weight: bold;
  color: #007aff;
  margin-bottom: 10rpx;
}

.result-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 40rpx;
}

.answer-detail {
  width: 100%;
}

.detail-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.answer-item {
  padding: 20rpx;
  border-radius: 15rpx;
  margin-bottom: 20rpx;
  border-left: 4rpx solid #ccc;
}

.answer-item.correct {
  background-color: #e8f5e9;
  border-left-color: #4caf50;
}

.answer-item.incorrect {
  background-color: #ffebee;
  border-left-color: #f44336;
}

.detail-question {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.detail-user-answer {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 5rpx;
}

.detail-correct-answer {
  font-size: 26rpx;
  color: #007aff;
  display: block;
}

.button-container {
  display: flex;
  justify-content: space-between;
  padding: 30rpx 0;
  background-color: #f8f8f8;
  position: sticky;
  bottom: 0;
  margin-top: auto;
}

.nav-btn, .submit-btn, .restart-btn {
  flex: 1;
  padding: 20rpx;
  margin: 0 10rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  border: none;
}

.nav-btn {
  background-color: #e0e0e0;
  color: #333;
}

.nav-btn:disabled {
  background-color: #bdbdbd;
  color: #9e9e9e;
}

.submit-btn {
  background-color: #007aff;
  color: white;
}

.restart-btn {
  background-color: #007aff;
  color: white;
  margin: 0 auto;
  width: 80%;
}
</style>